/**
 * 型体页组件
 */
<script setup>
import ModelGeo from '@/components/model/ModelGeo.vue'
import ModelTop from '@/components/model/ModelTop.vue'
import ModelCenter from '@/components/model/ModelCenter.vue'
import ModelBottom from '@/components/model/ModelBottom.vue'
import FactoryPopup from '@/components/model/ModelPopups/FactoryPopup.vue'
import ModelPopup from '@/components/model/ModelPopups/ModelPopup.vue'
</script>

<template>
  <div class="model-container">
    <div class="model-below">
      <ModelGeo/>
    </div>

    <div class="model-above">
      <div class="model-top">
        <ModelTop/>
      </div>

      <div class="model-center">
        <ModelCenter/>
      </div>

      <div class="model-bottom">
        <ModelBottom/>
      </div>
    </div>
  </div>

  <FactoryPopup/>
  <ModelPopup/>
</template>

<style lang="scss" scoped>
.model-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #12161b;

  .model-below {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .model-above {
    width: 100%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;

    .model-top {
      width: 100%;
      height: 5%;
      margin-bottom: 1%;
    }

    .model-center {
      width: 100%;
      height: 13%;
      margin-bottom: 1%;
    }

    .model-bottom {
      width: 100%;
      height: 78%;
    }
  }
}
</style>